<template>
  <!-- 子组件必须添加 v-bind="$attrs",  通过父传孙的方式传递给 antd 的原生组件中 -->
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    showFooter
    cancelText="关闭"
    :title="configRef.title"
    :width="configRef.width"
    :destroyOnClose="false"
    :showOkBtn="false"
  >
    <markdown-viewer :value="configRef.content" />
  </BasicDrawer>
</template>

<script lang="ts" setup>
  import { BasicDrawer, useDrawer } from '@/components/Drawer';
  import { MarkdownViewer } from '@/components/Markdown';
  import { ref } from 'vue';

  interface SourceDrawerConfig {
    title?: string;
    content?: string;
    width?: string;
  }
  // 接收父组件传的参数
  let configRef = ref<SourceDrawerConfig>({});

  // register 绑定组件, closeDrawer: 关闭, 回调方法接受参数
  const [register, { openDrawer }] = useDrawer();

  function open(config: SourceDrawerConfig) {
    // 使用属性赋值
    Object.assign(configRef.value, config);

    openDrawer();
  }

  defineExpose({ open });
</script>
